<template>
    <el-drawer
            v-bind="drawerOriginProp"
            v-if="enableDrawer && $route.meta.showInDrawer === true" :before-close="handleClose"
            :visible="drawerShow">
        <StElRouterView key="router" :level="level"></StElRouterView>
    </el-drawer>
    <StElRouterView v-else key="router" :level="level"></StElRouterView>

</template>

<script>
    export default {
        name: "StElRouterViewDrawer",
        props: {
            drawerOriginProp: {
                type: Object,
                default: function () {
                    return {
                        customClass: 'StElRouterViewDrawer-customClass'
                    }
                }
            },
            // 抽屉关闭回调
            beforeClose: Function,
            // 是否启动抽屉 需要在路由meta中定义showInDrawer属性
            enableDrawer: {
                type: Boolean,
                default: true
            },
            level: Number
        },
        data() {
            return {
                drawerShow: true
            }
        },
        methods: {
            handleClose(done) {
                this.$router.go(-1)
                done();
                if (this.beforeClose) {
                    beforeClose()
                }
            }
        },
        watch:{
        }
    }
</script>

<style>
.StElRouterViewDrawer-customClass{
    padding: 20px;
}
</style>